<template>
	<!-- <view calss="view.hotmovie">
		<view class="item" v-for="(item,index) in SelectedList" :key="index">
			<view class="img">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="content">
				<view class="name">电影名称:{{item.name}}</view>
				<view class="tiem">上映时间:{{item.tiem}}</view>
				<view class="star">主演:{{item.star}}</view>
				<view class="src">上映地区:{{item.src}}</view>
				<button class="btn" @tap="toDetails(item.objectId)">详情</button>
			</view>
		</view>
	</view> -->
	<view calss="view.hotmovie">
		<view class="item" v-for="(item,index) in data" :key="index">
			<view class="img">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="content">
				<view class="name">电影名称:{{item.nm}}</view>
				<view class="tiem">上映时间:{{item.showTimeInfo}}</view>
				<view class="star">主演:{{item.star}}</view>
				<view class="src">上映地区:{{item.src}}</view>
				<button class="btn">详情</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../untils/config.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '../../store/userStore.js';
	import {
		data
	} from '../../untils/data.js'
	let store = userStore()
	onLoad(() => {
		getSelected()
	})
	
	const SelectedList = ref([])
	async function getSelected() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/movie")
		console.log(res)
		SelectedList.value = res.results
	}
	function toDetails(id) {
		uni.navigateTo({
			url: `/pages/movie/movie?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		border: 1px solid gray;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		box-shadow: 0 0 10px gray;
		height: 500rpx;
		// width: 100%;
		.img {
			width: 200rpx;
			height: 300rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			width: 400rpx;
			height: 400rpx;

			.name {
				font-size: 45rpx;
				font-weight: 700;
				// margin-top: 10px;
			}

			.tiem {
				font-size: 25rpx;
				color: #999;
				margin-top: 5px;
			}

			.star {
				font-size: 35rpx;
				margin-top: 5px;
			}
			
			.src {
				font-size: 35rpx;
				margin-top: 5px;
			}
			.btn{
				width: 200rpx;
				height: 50rpx;
				margin-top: 40px;
				background-color: #007AFF;
				color: #fff;
				border-radius: 10px;
				font-size: 30rpx;
				line-height: 50rpx;
				text-align: center;
			}
		}
	}
</style>